<template>
    <div style="height: 500px; width: 500px; border: 1px solid red; position: relative;">
        <vdr :w="100" :is-conflict-check="true" :h="100" v-on:dragging="onDrag" v-on:resizing="onResize" :parent="true">
            <el-input></el-input>
        </vdr>
        <vdr
            :w="200"
            :h="200"
            :parent="true"
            :debug="false"
            :min-width="200"
            :min-height="200"
            :isConflictCheck="true"
            :snap="true"
            :snapTolerance="20"
        >
        </vdr>
    </div>
</template>

<script>
    import vdr from 'vue-draggable-resizable-gorkys'
    import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
    export default {
        name: 'TestResize',
        components: {vdr},
        data: function () {
            return {
                width: 0,
                height: 0,
                x: 0,
                y: 0
            }
        },
        methods: {
            onResize: function (x, y, width, height) {
                this.x = x
                this.y = y
                this.width = width
                this.height = height
            },
            onDrag: function (x, y) {
                this.x = x
                this.y = y
            }
        }
    }
</script>

<style scoped>
.helloword {
    overflow: hidden;
}
.text-event {
    float: left;
    height: 500px;
    width: 500px;
    border: 1px solid red;
    position: relative;
    　　background: linear-gradient(-90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0% 0% / 10px 10px, linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0% 0% / 10px 10px;
}
.p-event {
    float: left;
    height: 300px;
    width: 300px;
    border: 1px solid blue;
    position: relative;
    margin-left: 20px;
}

.dragging1 {
    border: 1px solid #000;
    color: #000;
}
</style>
